<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/china.js"></script>
		<script src="js/vue-resource.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
		<script src="js/commom.js"></script>

		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=bVhXlaPpURqYlnO4C5kljjS8plbjyqTr">
			//v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
		</script>
		<script src="js/InfoBox.js"></script>
		<script src="js/vue.js"></script>

		<title>顺和物联统一调度平台</title>
		<link rel="stylesheet" href="css/driver.css">
		<link rel="stylesheet" href="css/asidenav.css">
	</head>

	<body>

		<div class="page">
			<div class="title">
				<div class="titleTxt">顺和物联统一调度平台</div>
				<div class="time">
					<div id="showTime"></div>
					<script type="text/javascript">
						function showLocale(objD) {
							var str, colorhead, colorfoot;
							var yy = objD.getYear();
							if (yy < 1900) yy = yy + 1900;
							var MM = objD.getMonth() + 1;
							if (MM < 10) MM = '0' + MM;
							var dd = objD.getDate();
							if (dd < 10) dd = '0' + dd;
							var hh = objD.getHours();
							if (hh < 10) hh = '0' + hh;
							var mm = objD.getMinutes();
							if (mm < 10) mm = '0' + mm;
							var ss = objD.getSeconds();
							if (ss < 10) ss = '0' + ss;
							var ww = objD.getDay();
							str = yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
							return str;
						}

						function tick() {
							var today;
							today = new Date();
							document.getElementById("showTime").innerHTML = showLocale(today);
							window.setTimeout("tick()", 1000);
						}
						tick();
					</script>
				</div>
			</div>
			<div class="page">
				<div class="ball">
					<svg width="0" height="0">
						<defs>
							<filter id="goo">
								<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
								<feColorMatrix in="blur" mode="matrix"
									values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"></feColorMatrix>
								<feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
							</filter>
						</defs>
					</svg>
					<div class="aside-nav bounceInUp animated" id="aside-nav">
						<label for="" class="aside-menu" title="按住拖动">菜单</label>
						<a href="#" onclick="index()" title="首页" class="menu-item menu-first">首页</a>
						<a href="#" onclick="order()" title="订单" class="menu-item menu-second">订单</a>
						<a href="#" onclick="car()" title="车辆" class="menu-item menu-third">车辆</a>
					</div>
				</div>

				<script>
					function index() {
						window.location.href = "index.html"
					}

					function order() {
						window.location.href = "order.html"
					}

					function car() {
						window.location.href = "driver.html"
					}
				</script>
				<script src="js/asidenav.js"></script>
				<div class="content">
					<div class="contentLeft">
						<div class="contentLeftTop">
							<div class="titleTxtsecond">网点发车量走势图</div>
							<div id="driver"></div>
							<script type="text/javascript">
								var dom = document.getElementById("driver");
								var myChart2 = echarts.init(dom);
								option2 = {
									tooltip: {
										trigger: 'axis'
									},
									legend: {
										data: ['发车量', '发车量1'],
										// x: 'right',
										y: '0',
										textStyle: {
											color: '#fff'
										}
									},
									grid: {
										top: '16%',
										left: '2%',
										right: '10%',
										bottom: '2%',
										containLabel: true
									},
									xAxis: {
										name: '排名',
										nameTextStyle: {
											color: "#fff"
										},
										type: 'category',
										boundaryGap: true,
										axisLine: {
											lineStyle: {
												type: 'solid',
												color: '#ccc', //左边线的颜色
												width: '1' //坐标线的宽度
											},
											symbol: ['none', 'arrow']
										},
										axisLabel: {
											textStyle: {
												color: '#fff', //坐标值得具体的颜色

											},
										},
										data: []
									},
									yAxis: {
										name: '发车量',
										nameTextStyle: {
											color: "#fff"
										},
										type: 'value',
										min: 0,
										splitNumber: 3,
										axisLine: {
											lineStyle: {
												type: 'solid',
												color: '#ccc', //左边线的颜色
												width: '1' //坐标线的宽度
											},
											symbol: ['none', 'arrow']
										},
										axisLabel: {
											textStyle: {
												color: '#fff', //坐标值得具体的颜色
											}
										},
										splitLine: {
											show: true,
											lineStyle: {
												type: 'dotted',
												color: '#666'
											},
										}
									},
									series: [{
											name: '',
											type: 'bar',
											stack: '总量',
											barWidth: 20,
											itemStyle: { //上方显示数值
												normal: {
													color: function(params) {
														var colorList = ['#C33531', '#EFE42A', '#64BD3D', '#EE9201', '#29AAE3',
															'#B74AE5', '#0AAF9F', '#E89589', '#16A085', '#4A235A', '#C39BD3 ',
															'#F9E79F', '#BA4A00', '#ECF0F1', '#616A6B', '#EAF2F8', '#4A235A',
															'#3498DB'
														];
														return colorList[params.dataIndex]
													},
													label: {
														show: true, //开启显示
														position: 'top', //在上方显示
														textStyle: { //数值样式
															color: '#ffffff',
															fontSize: 14
														}
													}
												}
											},
											data: []
										},
										{
											name: '',
											type: 'line',
											stack: '数量',
											itemStyle: {
												normal: {
													color: "#f0be25",
													lineStyle: {
														color: "#f0be25"
													} /*折线颜色更改*/
												}
											},
											data: []
										}
									]
								};
								if (option2 && typeof option2 === "object") {
									myChart2.setOption(option2, true);
								}
								myChart2.setOption(option2);
								/*窗口自适应，关键代码*/
								$(window).resize(function() {
									myChart2.resize();
								});

								function getData() {
									$.ajax({
										/***********初始化获取全部设备坐标********/
										url: API_SERVER_URL + "dispatch_depart",
										type: 'POST',
										datatype: 'jsonp',
										// data: '',
										success: function(data) {
											//console.log(data)
											myChart2.setOption({
												xAxis: {
													data: data.echartX
												},
												series: [{
													name: '',
													data: data.echartY
												}, {
													name: '数量',
													data: data.echartY
												}, ]
											})
										},
										error: function(e) {}
									})
								}
								setInterval(getData, 10000); //定时器
								getData();
							</script>
						</div>
						<div class="contentLeftMiddle">
							<div class="titleTxtsecond">车型统计</div>
							<div id="fache"></div>
							<script type="text/javascript">
								var dom = document.getElementById("fache");
								var myChart1 = echarts.init(dom);
								option1 = {
									tooltip: {
										trigger: 'item',
										formatter: "{a} <br/>{b}: {c} ({d}%)"
									},
									series: [{
										name: '车型占比',
										type: 'pie',
										radius: '80%',
										center: ['50%', '50%'],
										selectedMode: 'single',
										avoidLabelOverlap: false,
										label: {
											normal: {
												show: true,
												textStyle: {
													color: '#fff',
													fontSize: "12"
												},
												formatter: '{b}\n{d}%',
												padding: [0, -10],
											},
											emphasis: {
												show: true,
												textStyle: {
													fontSize: '15',
													fontWeight: 'bold'
												},
											}
										},
										labelLine: { //指示线状态
											show: true,
											smooth: 0,
											length: 8,
											length2: 30
										},
										itemStyle: {},
										data: []
									}]
								};
								if (option1 && typeof option1 === "object") {
									myChart1.setOption(option1, true);
								}
								myChart1.setOption(option1);
								/*窗口自适应，关键代码*/
								$(window).resize(function() {
									myChart1.resize();
								});

								function getData() {
									$.ajax({
										/***********初始化获取全部设备坐标********/
										url: API_SERVER_URL + "dispatch_carType",
										type: 'POST',
										datatype: 'jsonp',
										// data: '',
										success: function(data) {
											var result = data.data
											var names = []; //定义两个数组
											var nums = [];
											$.each(result, function(key, values) { //此处我返回的是list<String,map<String,String>>循环map
												names.push(values.name);
												var obj = new Object();
												obj.name = values.name;
												obj.value = values.value;
												nums.push(obj);
											});
											myChart1.setOption({ //加载数据图表
												series: {
													// 根据名字对应到相应的系列
													name: ['车型占比'],
													data: nums
												}
											});
										},
										error: function(e) {}
									})
								}
								setInterval(getData, 10000); //定时器
								getData();
							</script>
						</div>
						<div class="contentLeftBottom">
							<div class="titleTxtsecond">实时运费结算</div>
							<div class="yunfei">
								<div class="yunfeiTitle">
									<div class="yunfeiCol">运单</div>
									<div class="yunfeiCol">车牌号</div>
									<div class="yunfeiCol">收款账号</div>
									<div class="yunfeiCol">支付运费</div>
								</div>
								<div class="yunfeiBox list_lh">
									<ul class="yunfeiBoxContents"></ul>
								</div>
							</div>
							<script src="js/scroll.js"></script>
							<script>
								getdata()

								function getdata() {
									$.ajax({
										/***********初始化获取全部设备坐标********/
										url: API_SERVER_URL + "settled_freight_settlement",
										type: 'POST',
										datatype: 'jsonp',
										// data: '',
										success: function(data) {
											var resultLists = data.data;
											for (var i = 0; i < resultLists.length; i++) {
												resultLists[i]
												if (resultLists[i].carNum == null) {
													resultLists[i].carNum = ''
												}
												if (resultLists[i].bankCardNo == null) {
													resultLists[i].bankCardNo = ''
												}
												var str = '<li class="yunfeiBoxContent" ><div class="yunfeiCol">' + resultLists[i]
													.orderSn + '</div><div class="yunfeiCol">' + resultLists[i].carNum +
													'</div><div class="yunfeiCol">' + resultLists[i].bankCardNo +
													'</div><div class="yunfeiCol">' + resultLists[i].payAmount +
													'</div></li>'
												$(".yunfeiBoxContents").append(str);
											}
											$(function() {
												$("div.list_lh").myScroll({
													speed: 30, //数值越大，速度越慢
													rowHeight: 32 //li的高�?
												});
											});
										},
										error: function(e) {}
									})
								}
							</script>
						</div>
					</div>
					<div class="contentMiddle">
						<div id="map"></div>
					</div>
					<div class="contentRight">
						<div class="contentRightTop">
							<div class="titleTxtsecond">区域货量排行榜</div>
							<div class="quyu" id="quyu">
								<div class="quyuTitle">
									<div class="quyuCol">排名</div>
									<div class="quyuCol">区域</div>
									<div class="quyuCol">货量(kg)</div>
								</div>
								<div class="quyuBox">
									<div class="quyuBoxContent" v-for="(item, index) in result" :key="index">
										<div class="quyuCol">
											<span:class="getRankCls(index)">{{getRankText(index)}}</span>
										</div>
										<div class="quyuCol" :title="item.totalArea">{{item.receiverPro}}</div>
										<div class="quyuCol">{{item.totalWeight}}</div>
									</div>
								</div>
							</div>
							<script>
								new Vue({
									el: '#quyu',
									data: {
										result: [],
									},
									mounted: function() {
										this.getData();
										setInterval(this.getData, 5000);
									},
									methods: {
										getRankCls(index) {
											if (index <= 2) {
												return `icon icon${index}`
											} else {
												return 'icon icons'
											}
										},
										getRankText(index) {
											if (index > 2) {
												return index + 1
											}
										},
										getData: function() {
											var that = this
											$.ajax({
												/***********初始化获取全部设备坐标********/
												url: API_SERVER_URL + "order_cargo_volume",
												type: 'POST',
												datatype: 'jsonp',
												// data: '',
												success: function(data) {
													that.result = data.data
												},
												error: function(e) {}
											})
										}
									},
								})
							</script>
						</div>
						<div class="contentRightBottom">
							<div class="titleTxtsecond">司机异常驾驶预警</div>
							<div class="yujing" id="yujing">
								<div class="yujingTitle">
									<div class="yujingCol">车牌号</div>
									<div class="yujingCol">手机号</div>
									<div class="yujingCol">预警类型</div>
									<div class="yujingColTime">预警时间</div>
								</div>
								<div class="yujingBox">
									<div class="yujingBoxContent" v-for="(item, index) in result" :key="index"
										:class="[item.type=== '疲劳驾驶' ? 'red':item.type==='超速驾驶'? 'yellow':item.type==='异常刹车'? 'green':'blue']">
										<div class="yujingCol">{{item.carNum}}</div>
										<div class="yujingCol">{{item.mobile}}</div>
										<div class="yujingCol">{{item.type}}</div>
										<div class="yujingColTime">{{item.warningTime}}</div>
									</div>
								</div>
							</div>
							<script>
								new Vue({
									el: '#yujing',
									data: {
										result: [],
									},
									mounted: function() {
										this.getData();
										setInterval(this.getData, 5000);
									},
									methods: {
										getData: function() {
											var that = this;
											$.ajax({
												/***********初始化获取全部设备坐标********/
												url: API_SERVER_URL + "driver_warn",
												type: 'POST',
												datatype: 'jsonp',
												// data: '',
												success: function(data) {
													that.result = data.data
												},
												error: function(e) {}
											})
										},
									},
								})
							</script>
						</div>
					</div>
				</div>
			</div>
	</body>
</html>

<script type="text/javascript">
	var map;
	var openArr = [];
	initMap();
	console.log(openArr)
	//创建和初始化地图函数：
	function initMap() { ///初始化地图
		createMap(); //创建地图
		setMapEvent(); //设置地图事件
		addMapControl(); //向地图添加控件
		$.ajax({
			/***********初始化获取全部设备坐标********/
			url: API_SERVER_URL + "car_list",
			type: 'post',
			// contentType: 'application/json',
			datatype: 'json',
			async: false,
			data: '',
			success: function(data) {
				console.log(data)
				if (data.code == 1) {
					var arr = data.data;
					var carNums = '';
					var order_type = "";
					console.log(arr)
					var arr_point = [];
					for (var i = 0; i < arr.length; i++) {
						var point = new BMap.Point(arr[i].lon, arr[i].lat);
						var carNums = arr[i].carNum;
						var order_type = arr[i].order_type;
						openArr.push({
							carNums,
							order_type,
							point
						})
						arr_point.push(point);
						var myIcon = new BMap.Icon("images/hc3.png", new BMap.Size(200, 80));
						var marker = new BMap.Marker(point, {
							icon: myIcon,
							zIndex: 98
						}); // 创建标注
						marker.carNums = arr[i].carNum;
						marker.order_type = arr[i].order_type;
						// console.log(marker.carNums)
						var label = new BMap.Label("车牌号" + arr[i].carNum + "</br>" + "当前位置" + arr[i].province +
							arr[i].city + arr[i].country + "</br>" + arr[i].adr, {
								offset: new BMap.Size(50, -100)
							});
						label.setStyle({
							display: "none",
							color: "#fff",
							backgroundColor: "#333333",
							border: "0",
							fontSize: "14px",
							width: "200px",
							opacity: "0.8",
							verticalAlign: "center",
							borderRadius: "2px",
							whiteSpace: "normal",
							wordWrap: "break-word",
							padding: "7px",
						});
						marker.setLabel(label);
						marker.addEventListener("mouseover", function(e) {
							marker.setTop(true, 27000000);
							var label = this.getLabel()
							label.setStyle({
								display: "block"
							});
						});
						marker.addEventListener("mouseout", function(e) {
							marker.setTop(false)
							var label = this.getLabel()
							label.setStyle({
								display: "none"
							});
						});
						map.addOverlay(marker); //将标记添加到地图中
						marker.addEventListener("click", attribute);
					}
					map.setViewport(arr_point);
				} else {}
			},
			error: function(e) {}
		})
	}

	openWebSocket()
	var websocket = null;

	function openWebSocket() {
		var url = API_SERVER_URLS + "driver";
		//判断当前浏览器是否支持WebSocket
		if ('WebSocket' in window) {
			websocket = new WebSocket(url);
		} else {
			console.log('当前浏览器 Not support websocket')
		}
		//连接发生错误的回调方法
		websocket.onerror = function() {
			setMessageInnerConsole("WebSocket连接发生错误");
		};
		//连接成功建立的回调方法
		websocket.onopen = function() {
			setMessageInnerConsole("WebSocket连接成功");
		}
		//接收到消息的回调方法
		websocket.onmessage = function(event) {
			setMessageInnerHTML(event.data);
		}
		//连接关闭的回调方法
		websocket.onclose = function() {
			setMessageInnerConsole("WebSocket连接关闭");
		}
	}
	//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
	window.onbeforeunload = function() {
		closeWebSocket();
	}
	//将消息显示在网页上
	// setMessageInnerHTML()
	function setMessageInnerHTML(data) {
		var dataObj = eval("(" + data + ")");
		console.log(dataObj)
		if (dataObj.code == 1) {
			if (openArr != null) {
				for (var i = 0; i < openArr.length; i++) {
					console.log(dataObj.carNum)
					if (openArr[i].carNums == dataObj.carNum) {
						var aMap = openArr[i].point
					}
				}
				html = ['<div class="arrBox" >', '</div>', '<div class="arrBoxBottom">', '<div>', '车牌号', dataObj.carNum,
					'</div>', '<div>', dataObj.type, '</div>', '</div>'
				]
				var InfoBox = new BMapLib.InfoBox(map, html.join(""), {
					boxStyle: {
						background: 'url(images/jingbao.png) center no-repeat',
						'background-size': "100% 100%",
						width: "220px",
						height: "140px",
						'border-radius': "7px",
						padding: '10px'
					},
					offset: {
						width: 0,
						height: 34
					},
					enableAutoPan: true,
					// closeIconUrl:'',
					align: INFOBOX_AT_TOP
				})
				InfoBox.open(new BMap.Point(aMap.lng, aMap.lat));
				setTimeout(function() {
					InfoBox.close()
				}, 5000)
			}
		} else {
			if (openArr != null) {
				for (var i = 0; i < openArr.length; i++) {
					console.log(dataObj.orderSn)
					if (openArr[i].carNums == dataObj.carNum) {
						var aMap = openArr[i].point
					}
				}
				html = ['<div class="arrBox" >', '订单已完成', '</div>', '<div class="arrBoxBottom">', '<div>', '订单号', dataObj
					.orderSn, '</div>', '</div>'
				]
				var InfoBox = new BMapLib.InfoBox(map, html.join(""), {
					boxStyle: {
						background: 'url(images/newOrder.png) center no-repeat',
						'background-size': "100% 100%",
						width: "220px",
						height: "140px",
						'border-radius': "7px",
						padding: '10px'
					},
					offset: {
						width: 0,
						height: 34
					},
					enableAutoPan: true,
					align: INFOBOX_AT_TOP
				})
				InfoBox.open(new BMap.Point(aMap.lng, aMap.lat));
				setTimeout(function() {
					InfoBox.close()
				}, 5000)
			}
		}
	}

	//将消息显示在网页上
	function setMessageInnerConsole(innerHTML) {
		//console.log(innerHTML)
		//document.getElementById('message').innerHTML += innerHTML + '<br/>';
	}
	//关闭WebSocket连接
	function closeWebSocket() {
		websocket.onclose = function() {
			setMessageInnerConsole("WebSocket连接关闭");
		}
	}
	//获取覆盖物位置
	function attribute(e) {
		var carNum = this.carNums;
		var order_type = this.order_type;
		window.location.href = "detailsTwo.html?value=" + carNum + "&order_type=" + order_type;
	}
	setInterval(getData, 10000); //定时器
	//创建地图函数：
	function createMap() {
		map = new BMap.Map("map"); //在百度地图容器中创建一个地图
		var point = new BMap.Point(116.249684, 36.569412); //定义一个中心点坐标
		map.centerAndZoom(point, 6); //设定地图的中心点和坐标并将地图显示在地图容器中
		// window.map = map; //将map变量存储在全局
		map.setMapStyleV2({
			styleId: '04ec7db1deb55c04daa364702d68652e'
		});
	}

	//地图事件设置函数：
	function setMapEvent() {
		map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
		map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
		map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
		map.enableKeyboard(); //启用键盘上下左右键移动地图
	}

	//地图控件添加函数：
	function addMapControl() {
		//向地图中添加缩放控件
		var ctrl_nav = new BMap.NavigationControl({
			anchor: BMAP_ANCHOR_TOP_LEFT,
			type: BMAP_NAVIGATION_CONTROL_ZOOM
		});
		map.addControl(ctrl_nav);
		//向地图中添加比例尺控件
		var ctrl_sca = new BMap.ScaleControl({
			anchor: BMAP_ANCHOR_BOTTOM_LEFT
		});
		map.addControl(ctrl_sca);
	}
</script>
